<script setup>
import { ref } from 'vue'
import { artGetBlogListService } from '@/api/web/article'
import router from '@/router'
import { dayjs } from 'element-plus'
const loading = ref(false)
const list = ref([])
const getList = async () => {
  loading.value = true
  const res = await artGetBlogListService()
  list.value = res.data.data
  list.value.forEach((item) => {
    item.createTime = dayjs(item.createTime).format('YYYY-MM-DD')
  })
  loading.value = false
}
getList()
defineOptions({
  name: 'BlogPage'
})
</script>
<template>
  <el-row>
    <el-col :span="6"></el-col>
    <el-col :span="12">
      <div>
        <el-row class="title">
          <el-col :span="6"></el-col>
          <el-col :span="12">
            <h2>
              欢迎来到<span class="author" @click="router.push('/login')"
                >大聪明</span
              >的博客
            </h2>
            <div class="logo"></div>
            <el-button type="primary">微信号</el-button>
            <el-button type="success">公众号</el-button>
            <el-button type="info">QQ号</el-button>
            <el-button type="warning">博客</el-button>
          </el-col>
        </el-row>
      </div>
      <el-timeline style="margin-top: 50px">
        <el-timeline-item
          v-loading="loading"
          v-for="item in list"
          :key="item.id"
          @click="router.push(`/detail/${item.id}`)"
          :timestamp="item.createTime"
          placement="top"
        >
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.summary }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-col>
  </el-row>
</template>

<style scoped lang="less">
.title {
  text-align: center;
  .logo {
    margin-left: 60px;
    width: 200px;
    height: 150px;
    background: url('../../assets/imgs/logo.png') no-repeat center/cover;
  }
  .author {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
